<template>
  <view class="pap-tab">
    <view
      class="pap-tab-item"
      :class="{ active: currentIndex === index }"
      v-for="(item, index) in list"
      :key="index"
      @click="changeTab(item, index)"
    >
      {{ item.name }}
    </view>
    <view class="pap-tab-underline" />
  </view>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      currentIndex: 0
    }
  },
  methods: {
    changeTab(item, index) {
      this.currentIndex = index
    }
  }
}
</script>

<style lang="scss" scoped>
.pap-tab {
  display: flex;

  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-bottom: 0.5px solid rgba(231, 231, 231, 1);
  }

  .pap-tab-item {
    flex: 1;
    padding: 26rpx 50rpx;
    font-size: 32rpx;
    color: rgba(0, 0, 0, 0.9);

    &.active {
      font-weight: 600;
      color: #fff;
      background: rgba(0, 82, 217, 1);
    }
  }

  .pap-tab-underline {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4rpx;
    background: rgba(0, 82, 217, 1);
  }
}
</style>
